import React from 'react';
import { connect } from 'dva';
import DEL from '../../../../assets/busi/OperatePlatform/menuList/delete.png';
import ADD from '../../../../assets/busi/OperatePlatform/menuList/add.png';
import { IconMenu } from '../../IconConfig/IconConfig';
import { SecondHeaderC, FirstHeaderC } from '../../../../comps';
import style from './index.less';
class showModalC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myApply: [],
      otherApply: [],
    };
  }
  componentDidMount() {
    //0是显示我的应用  1显示其他应用
    const { controlCurrent } = this.props.OperatePlatformM;
    this.props.onRef(this);
    let newMyApply = [];
    let newOtherApply = [];
    if (controlCurrent) {
      newMyApply = controlCurrent.myApp;
      newOtherApply = controlCurrent.otherApp;
    }
    this.setState({
      myApply: newMyApply,
      otherApply: newOtherApply,
    });
  }
  // 单个组件
  oneCommon = (text, state) => {
    //获取对应的菜单的icon
    let needData = IconMenu.filter((item, index) => item.title == text.name);
    return (
      <div className={style.oneContent}>
        <div className={style.borderset_child}>
          <div style={{ textAlign: 'right' }}>
            <img onClick={() => this.clickIcon(text)} alt={text} src={state == 'myUse' ? DEL : ADD} style={{ height: '15px', width: '15px', cursor: 'pointer' }} />
          </div>
          <div style={{ textAlign: 'center' }}>
            <img alt={needData.length ? needData[0].title : ''} src={needData.length ? needData[0].icon : null} style={{ height: '60px', width: '60px' }} />
          </div>
          <div style={{ textAlign: 'center' }}>
            <span>{needData.length ? needData[0].title : ''}</span>
          </div>
        </div>
      </div>
    );
  };
  clickIcon = (text) => {
    const { myApply, otherApply } = this.state;
    let newMyApply = JSON.parse(JSON.stringify(myApply));
    let newOtherApply = JSON.parse(JSON.stringify(otherApply));
    if (newMyApply.find((item, index) => item.name == text.name)) {
      let sameVal = newMyApply.filter((item, index) => item.name == text.name)[0];
      newMyApply = newMyApply.filter((item, index) => item.name != text.name);
      newOtherApply.push(sameVal);
    } else if (newOtherApply.find((item, index) => item.name == text.name)) {
      let sameVal = newOtherApply.filter((item, index) => item.name == text.name)[0];
      newOtherApply = newOtherApply.filter((item, index) => item.name != text.name);
      newMyApply.push(sameVal);
    }
    this.setState({
      myApply: newMyApply,
      otherApply: newOtherApply,
    });
  };
  render() {
    const { myApply, otherApply } = this.state;
    //组合管理
    let zuheManage = ['组合定义', '组合日历', '组合试算', '现金流预测', '现金流回溯', '组合跟踪', '产品组定义', '组合优化', '资产配置', '资产筛选'];
    //绩效分析
    let jxAsyis = ['净值分析', '盈亏分析', '收益率表现', '归因分析', '交易分析'];
    //综合查询
    let allSearch = ['持仓查询', '流水查询', '资金明细'];
    //报告服务
    let reportManage = ['现金管理理财新规报告'];
    //限额管理
    let xeMonitor = ['限额监控'];
    return (
      <div className={style.modalContent}>
        <div className={style.content_child}>
          <div>
            <FirstHeaderC title='我的应用' />
            <div className={style.child_1_main}>
              {myApply.map((item, index) => {
                return (
                  <div className={style.child_11} key={item.id}>
                    {this.oneCommon(item, 'myUse')}
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{ marginTop: '20px' }}>
            <FirstHeaderC title='其他应用' />
            <div className={style.child_1}>
              <div>
                <SecondHeaderC title='组合管理' />
                <div className={style.child_other}>
                  {otherApply.map((item, index) => {
                    if (zuheManage.indexOf(item.name) >= 0) {
                      return (
                        <div className={style.child_11} key={item.id}>
                          {this.oneCommon(item, 'zuheManage')}
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
              <div>
                <SecondHeaderC title='绩效分析' />
                <div className={style.child_other}>
                  {otherApply.map((item, index) => {
                    if (jxAsyis.indexOf(item.name) >= 0) {
                      return (
                        <div className='style.child_11' key={item.id}>
                          {this.oneCommon(item, 'jxAsyis')}
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
              <div>
                <SecondHeaderC title='综合查询' />
                <div className={style.child_other}>
                  {otherApply.map((item, index) => {
                    if (allSearch.indexOf(item.name) >= 0) {
                      return (
                        <div className={style.child_11} key={item.id}>
                          {this.oneCommon(item, 'allSearch')}
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
              <div>
                <SecondHeaderC title='报告服务' />
                <div className={style.child_other}>
                  {otherApply.map((item, index) => {
                    if (reportManage.indexOf(item.name) >= 0) {
                      return (
                        <div className={style.child_11} key={item.id}>
                          {this.oneCommon(item, 'reportManage')}
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
              <div>
                <SecondHeaderC title='限额管理' />
                <div className={style.child_other}>
                  {otherApply.map((item, index) => {
                    if (xeMonitor.indexOf(item.name) >= 0) {
                      return (
                        <div className={style.child_11} key={item.id}>
                          {this.oneCommon(item, 'xeMonitor')}
                        </div>
                      );
                    }
                  })}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default connect(({ OperatePlatformM }) => ({ OperatePlatformM }))(showModalC);
